<template>
  <ea-input-number
    ref="elInput"
    v-model="valueModel"
    v-bind="props"
    v-on="$listeners"
  />
</template>

<script>
import EaInputNumber from '@/components/ea/EaInputNumber';
import {cloneJson} from "../../../utils";

/**
 * 数字输入框
 * @author maolin
 */
export default {
  name: "ErpFormInputNumber",
  components: {
    EaInputNumber
  },
  model: {
    prop: 'value',
    event: 'value-change'
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * [属性](https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/input/api)
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 额外配置
     * @public
     */
    extra: {
      type: Object,
      default () {
        // return {
        //   watchForm: {
        //     enable: true,
        //     updateFormFunction: "", // function/ string
        //   }
        // }
      }
    }
  },
  computed: {
    valueModel: {
      get () {
        return this.value;
      },
      set (val) {
        this.handleValueChange(val);
      }
    },
    formCom () {
      return cloneJson(this.form);
    },
    enableWatchForm () {
      return !!(this.extra && this.extra.watchForm && this.extra.watchForm.enable === true);
    },
    watchFormFields () {
      return this?.extra?.watchForm?.fields ?? [];
    },
    watchFormFunction () {
      return this?.extra?.watchForm?.watchFunction ?? '';
    },
    updateFormFunction () {
      return this?.extra?.watchForm?.updateFormFunction ?? '';
    },
  },
  watch: {
    formCom: {
      handler (form, oldForm) {
        this.watchForm(form, oldForm);
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 数字输入框获取焦点
     * @public
     */
    focus () {
      this.$refs.elInput.focus();
    },
    /**
     * 数字输入框选项选项
     * @public
     */
    select () {
      this.$refs.elInput.select();
    },
    /**
     * 值更新
     * @param {string|number} val 值
     * @public
     */
    handleValueChange (val) {
      /**
       * 值更新
       * @param {string|number} val 值
       * @public
       */
      this.$emit('value-change', val);
    },
    /**
     * 实时观察表单，已废弃
     */
    watchForm (form, oldForm) {
      console.log(form, oldForm)
      if (this.enableWatchForm && this.watchFormFields && this.watchFormFields.length > 0) {
        let isChangeForm = false;
        // 若检测到表单数据有更新
        for (let i in this.watchFormFields) {
          let key = this.watchFormFields[i];
          if (form[key] !== oldForm[key]) {
            isChangeForm = true;
            break;
          }
        }
        // console.log(oldForm[this.field]);
        if (isChangeForm) {
          let value = '';
          try {
            if (typeof this.watchFormFunction === 'string') {
              value = new Function('form', 'field', this.watchFormFunction)(form, this.field);
            } else if (typeof this.watchFormFunction === 'function') {
              let func = ({form, field}) => {
                return this.watchFormFunction({form, field});
              };
              value = func({form: form, field: this.field});
            }
          } catch (e) {
            console.log('watchFormFunction error');
            console.log(e);
          }
          this.valueModel = value;
        }
      }
    },
    /**
     * 更新表单中其他字段
     * @private
     * @param value
     */
    updateForm (value) {
      let updateForm = {};
      if (this.updateFormFunction) {
        try {
          if (typeof this.updateFormFunction === 'string') {
            updateForm = new Function('form', 'field', 'value', this.updateFormFunction)(this.formCom, this.field, value);
          } else if (typeof this.updateFormFunction === 'function') {
            let func = ({form, field, value}) => {
              return this.updateFormFunction({form, field, value});
            };
            updateForm = func({form: this.formCom, field: this.field, value: value});
          }
        } catch (e) {
          console.log('updateFormFunction error');
          console.log(e);
        }
      }
      return updateForm;
    }
  }
};
</script>

<style scoped>

</style>
